<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>学生数据列表</title>
    <style>
        /* CSS代码位置 */
        .container {
            width: 80%;
            margin: 50px auto;
            font-family: "微软雅黑", sans-serif;
        }

        h2 {
            text-align: center;
            color: #333;
        }

        #studentTable {
            width: 100%;
            border-collapse: collapse; /* 合并边框 */
            text-align: center;
        }

        #studentTable th, #studentTable td {
            border: 1px solid #666;
            padding: 12px 8px;
        }

        #studentTable th {
            background-color: #e0f2fe; /* 表头浅蓝背景 */
            font-weight: bold;
            color: #222;
        }

        #studentTable tr:hover {
            background-color: #f0f9ff; /* 行 hover 效果 */
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>学生信息列表</h2>
        <table id="studentTable">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>专业</th>
                    <th>年级</th>
                </tr>
            </thead>
            <tbody>
                <!-- JavaScript动态渲染数据 -->
            </tbody>
        </table>
    </div>

    <script>
        // JavaScript代码位置
        // 创建XMLHttpRequest对象
        const xhr = new XMLHttpRequest();
        // 配置请求：请求方式、JSON Server接口地址
        xhr.open('GET', 'http://localhost:3000/students', true);

        // 监听请求完成事件
        xhr.onload = function() {
            // 验证请求状态（200表示成功）
            if (xhr.status === 200) {
                // 解析JSON格式的响应数据
                const students = JSON.parse(xhr.responseText);
                // 获取表格tbody元素
                const tbody = document.querySelector('#studentTable tbody');
                
                // 遍历学生数据，动态生成表格行
                students.forEach(student => {
                    const tr = document.createElement('tr');
                    tr.innerHTML = `
                        <td>${student.id}</td>
                        <td>${student.姓名}</td>
                        <td>${student.年龄}</td>
                        <td>${student.专业}</td>
                        <td>${student.年级}</td>
                    `;
                    tbody.appendChild(tr);
                });
            } else {
                console.error('数据请求失败，状态码：', xhr.status);
            }
        };

        // 发送请求
        xhr.send();
    </script>
</body>
</html>
